<template>
  <div>
    <div ref="miqieRef" style="width: 100%; height: 400px;" id="main"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name:'miqie',
    props:['pirData','value1'],
    data(){
        return{

        }
    },
    watch: {
      pirData: function(newData, oldData) {
        // 当 pirData 发生变化时更新图表
        this.initChartData();
      }
    },
    mounted(){
        this.initChartData();
    },
    methods:{
        initChartData(){

var chartDom = this.$refs.miqieRef;
var myChart = echarts.init(chartDom);
var option;

option = {
  dataset: {
    source: this.pirData
  },
  color: ['#4876FF', '#32CD32', '	#B22222','#00CED1','#D2691E'],
  title: {
    text: this.$t('analyze.appmingzhongpaihang'),
    top: 'top',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    // formatter: '{a} <br/>{b} : {c}%'
    formatter: function(params) {
    // params 包含了 tooltip 的所有信息
    // params.seriesName: 系列的名称
    // params.name: 数据项的名称
    // params.value: 数据项的值
    return `${params.seriesName} <br/>${params.name} :${params.data.cnt}条 <br/> 占比:${params.data.percentage}%`;
  }
  },
//   toolbox: {
//     feature: {
//       dataView: { readOnly: false },
//       restore: {},
//       saveAsImage: {}
//     }
//   },
//   legend: {
//     data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
//   },
  series: [
    {
      name: 'App',
      type: 'funnel',
      sort: 'none',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside'
      },
      encode: {
        itemName: 'app_name', // 数据中的 name 字段对应饼图的名称
        value: 'cnt' // 数据中的 cnt 字段对应饼图的值
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      // data: [
      //   { value: 60, name: '李林波' },
      //   { value: 40, name: '张浩' },
      //   { value: 20, name: '小刘' },
      //   { value: 80, name: '王哥' },
      //   { value: 100, name: '李四' },
      //   { value: 60, name: '王五' },
      //   { value: 40, name: '马六' },
      //   { value: 20, name: '文三' },
      //   { value: 80, name: '小六' },
      //   { value: 100, name: '老六' }
      // ]
    }
  ]
};

// option && myChart.setOption(option);

      // option && myChart.setOption(option);
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize(); 
      });

        }
    }
}
</script>

<style>

</style>